<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="content"
    style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
  <div id="content1"
    style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
  <script>
    let num = 1;
    let num1=1;
    let content = document.getElementById('content');
    let content1 = document.getElementById('content1')
    function count() {
      content.innerHTML = num++;
    };
    function count1() {
      content1.innerHTML = num1++;
    }
    content.onmousemove = count;
    


    // 函数防抖
    function debounce(func,wait){
      let timer=null;
      return function(...args){
        if(timer) clearTimeout(timer);
        timer=setTimeout(()=>{
          func.apply(this,args)
        },wait)
      }
    }
    // 使用函数防抖
    content1.onmousemove = debounce(count1,1000);
  </script>
</body>

</html>